<template>
  <div class="article-panel active" @click="articlePanelClick(article.id)">
    <h3>
      <a class="article-title"> {{ article.title }}</a>
    </h3>
    <div class="article-info">
      <span class="time"
        ><time>{{ timeParse(article.createTime) }}</time></span
      >
      <span class="hit"
        ><i class="iconfont icon-liulan"></i
        >{{ (this.hit = article.readNum) }}</span
      >
      <span class="like"
        ><i class="iconfont icon-xihuan"></i
        >{{ (this.like = article.likeNum) }}</span
      >
    </div>
    <p class="article-description">
      {{ article.description }}
    </p>
  </div>
</template>

<script>
import TimeUtil from "@/utils/TimeUtil.js";
export default {
  name: "ArticlePanel",
  components: {},
  props: ["article"],
  data() {
    return {
      hit: 0,
      like: 0,
    };
  },
  computed: {},
  watch: {},
  created() {
    console.log("article ----");
    console.log(this.article);
  },
  mounted() {},
  methods: {
    articlePanelClick(id) {
      console.log("id：" + id);
      let articleData = this.article
      this.$bus.$emit('articlePanelClick',articleData);
    },
    timeParse(timeStamp) {
      return TimeUtil.timeParse(timeStamp);
    },
  },
};
</script>

<style scoped lang="scss">
@import "@/assets/scss/theme.scss";
.article-panel {
  border: 1px solid rgba(0, 0, 0, 0.2);
  margin: 20px 20px;
  padding: 20px 20px;
  border-radius: 4px;
}
.article-title {
  float: left;
  cursor: pointer;
}
.article-info {
  line-height: 50px;
  font-size: 14px;
  clear: both;
}
.article-info > span {
  float: left;
  margin-right: 20px;
  cursor: pointer;
}
.article-description {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 15px;
  text-align: left;
  letter-spacing: 1px;
  clear: both;
  color: $font-color-gray;
}
</style>
